<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container {
            width: 1024px;
            background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
            position: relative;
            margin: 0 auto;
        }
        #rocket-to-top div {
            left: 0;
            margin: 0;
            overflow: hidden;
            padding: 0;
            position: absolute;
            top: 0;
            width: 149px;
        }
        .rocket-to-top {
            background: url("./src/img/rocket.png") no-repeat scroll 0 0 transparent;
            cursor: default;
            display: block;
            height: 250px;
            margin: -125px 0 0;
            overflow: hidden;
            padding: 0;
            position: fixed;
            right: 0;
            top: 80%;
            width: 149px;
            z-index: 11;
        }
        #rocket-to-top .level-2 {
            background: url("./src/img/rocket.png") no-repeat scroll -149px 0 transparent;
            display: none;
            height: 250px;
            opacity: 0;
            z-index: 1;
        }
        #rocket-to-top .level-3 {
            background: none repeat scroll 0 0 transparent;
            cursor: pointer;
            display: block;
            height: 150px;
            z-index: 2;
        }
        .block {
            height: 600px;
            font-size: 25px;
            font-weight: bold;
            color: #0086b3;
            padding: 15px;
            background-color: #e2d1c3;
        }
    </style>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">

    // jQuery火箭图标返回顶部代码
    $(function(){
        console.log('\n %c 火箭图标脚本 v1.0 %c 脚本初始化--开始！ ','color: #fadfa3; background: #030307; padding:5px 0;border-radius: 5px 0 0 5px;','background: #fadfa3; padding:5px 0;border-radius: 0 5px 5px 0;');
    });

    $(function() {
        var e = $("#rocket-to-top"),
            t = $(document).scrollTop(),
            n,
            r,
            i = !0;
        $(window).scroll(function() {
            var t = $(document).scrollTop();
            t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
                    marginTop: "-1000px"
                },
                "normal",
                function() {
                    e.css({
                        "margin-top": "-125px",
                        display: "none"
                    }),
                        i = !0
                })) : e.fadeIn("slow")
        }),
            e.hover(function() {
                    $(".level-2").stop(!0).animate({
                        opacity: 1
                    })
                },
                function() {
                    $(".level-2").stop(!0).animate({
                        opacity: 0
                    })
                }),
            $(".level-3").click(function() {
                function t() {
                    var t = e.css("background-position");
                    if (e.css("display") == "none" || i == 0) {
                        clearInterval(n),
                            e.css("background-position", "0px 0px");
                        return
                    }
                    switch (t){
                        case "0px 0px":
                            e.css("background-position", "-298px 0px");
                            break;
                        case "-298px 0px":
                            e.css("background-position", "-447px 0px");
                            break;
                        case "-447px 0px":
                            e.css("background-position", "-596px 0px");
                            break;
                        case "-596px 0px":
                            e.css("background-position", "-745px 0px");
                            break;
                        case "-745px 0px":
                            e.css("background-position", "-298px 0px");
                    }
                }
                if (!i) return;
                n = setInterval(t, 50),
                    $("html,body").animate({scrollTop: 0},"slow");
            });
    });
    $(function(){
        console.log('\n %c 火箭图标脚本 v1.0 %c 脚本初始化--结束！ ','color: #fadfa3; background: #030307; padding:5px 0;border-radius: 5px 0 0 5px;','background: #fadfa3; padding:5px 0;border-radius: 0 5px 5px 0;');
    });
</script>
<div class="container">
    <div class="block"><p>滚到底</p></div>
    <div class="block"><p>1</p></div>
    <div class="block"><p>2</p></div>
    <div class="block"><p>3</p></div>
    <div class="block"><p>4</p></div>
    <div class="block"><p>5</p></div>
    <div class="block"><p>点击右侧火箭图标返回顶部</p></div>
    <div id="rocket-to-top" class="rocket-to-top">
        <div style="opacity: 0; display: block;" class="level-2"></div>
        <div class="level-3"></div>
    </div>
</div>
</body>
</html>